<template>
  <div class="smollbox">
    <ul class="mi">
      <li v-for="item in list" :key="item.product_id" @click='pathAbout(item.product_id)'>
        <img :src="'api' + item.product_picture" :alt="item.product_name">
        <h3>{{item.product_name}}</h3>
        <h4>{{item.product_title}}</h4>
        <p><span>{{item.product_selling_price}}元</span><s v-if='item.product_selling_price !== item.product_price'>{{item.product_price}}元</s></p>
      </li>
      <li @click='Browse'>
          <a>浏览更多》</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "homeshopli",
  props: ["list"],
  methods:{
    pathAbout(id){
      this.$router.push('/about/details?id='+id)
    },
    Browse(){
      var arr = []
      this.list.forEach(item => {
        arr.push(item.category_id)
      });
      function data(arr){
        return [...new Set(arr)]
      }
      let list = data(arr)
      console.log(list)
      this.$router.push({path:'/about/allGoods',query:{categoryID:list}})
    }
  }
};
</script>

<style lang='scss'>
.smollbox{
      // background: green;
      height:615px;
      flex: 1;
      &>ul{
        width: 100%;
        height: 100%;
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        li{
          background: #fff;
          width: 216px;
          height: 300px;
          margin: 0px 0 15px 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items:center; 
          cursor: pointer;
          -webkit-transition: 0.5s;
          a{
              font-size: 18px;
              color: #333;
              text-decoration: none;
          }
          a:hover{
              color: #ff6700;
              transition: 0.6s;
          }
          h3{
              width: 180px;
              font-size: 14px;
              color:#333;
              font-weight: 400;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: center;
          }
          h4{
              font-size: 12px;
              color: #b0b0b0;
              font-weight: 400;
          }
          img{
              width: 160px;
              height: 160px;
              margin: 0 18px;
          }
          p{
              span{
                  font-size: 16px;
                  color: #FF6700;
              }
              s{
                  display: inline-block;
                  font-size: 16px;
                  color: #b0b0b0;
                  margin-left: 10px;
              }
          }
        }
        li:hover{
          transform: translateY(-2px);
          transition: all 0.5s;
          box-shadow:0 10px 10px 4px rgb(221,221,221);
        }
      }
    }
</style>